<template>
	<view class="container mySetupclass">
		<!-- <view class="setupTips">
			<view class="">
				请补全以下带 <text style="color: #E04B28;">*</text>号的信息
			</view>
		</view> -->
		<view class="paddingClass">
			<view class="setupInfo">
				<view class="setupTitle">
					顾客姓名
					<!-- <view class="stars">
						*
					</view> -->
				</view>
				<view class="setupCon">
					<input v-model="form.userName"></input>
				</view>
			</view>
			<view class="">
				<picker @change="genderChange" :value="form.genderIndex" :range="genderArray">
					<view class="setupInfo">
						<view class="setupTitle">
							顾客性别
							<!-- <view class="stars">
								*
							</view> -->
						</view>
						<view class="setupCon">
							<text class="" v-if="form.userGender">{{form.userGender}}</text>
							<text class="" v-else>未设置</text>
							<text class="iconfont iconxiangyou"></text>
						</view>
					</view>
				</picker>

			</view>
			<view class="">
				<view class="setupInfo">
					<view class="setupTitle">
						顾客年龄
						<!-- <view class="stars">
							*
						</view> -->
					</view>
					<view class="setupCon">
						<input v-model="form.age"></input>
					</view>
				</view>
			</view>
			<!-- <view class="setupInfo" @tap="jumpTo">
				<view class="setupTitle">
					收货地址
				</view>
				<view class="setupCon">
					<text class="iconfont iconxiangyou"></text>
				</view>
			</view> -->
			<view class="">
				<view class="setupInfo">
					<view class="setupTitle">
						爱好
					</view>
					<view class="setupCon">
						<input v-model="form.hobby"></input>
					</view>
				</view>
			</view>
			<view class="">
				<view class="setupInfo">
					<view class="setupTitle">
						性格特点
					</view>
					<view class="setupCon">
						<input v-model="form.characteristic"></input>
					</view>
				</view>
			</view>
			<view class="">
				<view class="setupInfo">
					<view class="setupTitle">
						预期1
					</view>
					<view class="setupCon">
						<input v-model="form.expect1"></input>
					</view>
				</view>
			</view>
			<view class="">
				<view class="setupInfo">
					<view class="setupTitle">
						预期2
					</view>
					<view class="setupCon">
						<input v-model="form.expect2"></input>
					</view>
				</view>
			</view>
			<view class="">
				<view class="setupInfo">
					<view class="setupTitle">
						预期3
					</view>
					<view class="setupCon">
						<input v-model="form.expect3"></input>
					</view>
				</view>
			</view>
		</view>
		<loading></loading>
		<tui-modal></tui-modal>
		<foot-bar :tabbar="tabbar"></foot-bar>
	</view>
</template>

<script>
	import footBar from "../footbar/footbar.vue"
	export default {
		components: {
			footBar,
		},
		data() {
			return {
				form: {
					userName: '王勇',
					age: 42,
					userGender: ''
				},
				genderIndex: 0,
				tabbar: [
					{
						icon: 'iconshouyehome',
						text: "订单记录"
					}
					, {
						icon: 'icon2',
						text: "我的顾客"
					}
					, {
						icon: 'iconwode',
						text: "优惠卡卷"
					}, {
						icon: 'iconwode',
						text: "店铺信息"
					}
				],
				genderArray: ['女', '男'] //性别数组
			}
		},
		onLoad() {
		},
		onShow() {
		},
		methods: {
			// 修改姓名和手机号
			goUpdata(type, data) {
				// uni.navigateTo({
				// 	url: `../mySetup/updata?type=${type}&data=${data}`
				// 	// url: "../myUpdata/myUpdata"
				// })
			},
			// 选择性别
			genderChange(e) {
				this.form.genderIndex = e.target.value
				this.form.userGender = this.genderArray[this.form.genderIndex]
				// let params = {}
				// params.userGender = this.genderIndex
				// params.type = 4
				// this.$http.customersUpdate(params).then((res) => {
				// 	if (res.status === 0) {
				// 		uni.showToast({
				// 			title: '保存成功',
				// 			icon: 'none',
				// 		})
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
	.container {
		color: #111111;
		background-color: #fff;
		height: 100vh;
		font-size: 30rpx;
	}

	.setupTips {
		padding: 40rpx 20rpx;
		border-top: 5rpx solid #f7f7f7;
		border-bottom: 20rpx solid #f7f7f7;
	}
	.paddingClass{
		padding: 0 20rpx;
	}
	.setupInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-top: 20rpx;
		padding: 25rpx 20rpx;
		border-bottom: 1px solid #eee;
		// background-color: #fff;

		.img {
			width: 80rpx;
			height: 80rpx;
		}
		.setupTitle{
			position: relative;
			color: #111;
		}
		.setupCon{
			color: #999;
			text-align: right;
		}
		.stars{
			color: #F54F46;
			position: absolute;
			top: -10rpx;
			left: 64rpx;
		}
	}

	.mySetupclass .uni-popup {
		z-index: 99995 !important;
	}

	.uni-tip-box {
		padding: 15rpx;
		width: 500rpx;
		// height: 400rpx;
		text-align: center;
		background: #fff;
		box-sizing: border-box;
		border-radius: 20rpx;
		position: relative;
	}

	.setupInput {
		border: 1px solid #ccc;
		border-radius: 20rpx;
		height: 60rpx;
	}

	.setupTypeShow {
		padding: 20rpx;
	}

	.couponButton {
		padding: 0 140rpx;

	}

	.couponButton .uni-button {
		width: 80rpx !important;
		background-color: #E94732;
		color: #fff !important;
	}

	.uni-tip-group-button {
		margin-top: 40rpx;
		display: flex;
		// position: absolute;
		// bottom: 40rpx;
		// width: 100%;
	}

	.uni-tip-button {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		border: 2rpx solid #E94732;
		margin: 0 20rpx;
		border-radius: 40rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #E94732;
	}
</style>
